import { Select } from 'antd';
import { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { getArticleChannelsAction } from '@/store/actions/article';
const { Option } = Select;

export const Channel = ({ value, onChange, width }) => {
  const dispatch = useDispatch();
  const { channels } = useSelector(state => state.article);

  useEffect(() => {
    const getArticleChannels = async () => {
      await dispatch(getArticleChannelsAction());
    };
    getArticleChannels();
  }, [dispatch]);
  return (
    <Select
      placeholder="请选择文章频道"
      style={{ width }}
      value={value}
      onChange={onChange}
      allowClear
    >
      {channels.map(item => (
        <Option value={item.id} key={item.id}>
          {item.name}
        </Option>
      ))}
    </Select>
  );
};
